<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue常用指令测试</title>
</head>
<body>

<div id="app">
    <!--    相当于MVVM的view视图层-->
    <ul>
        <!--元素数据，元素下标-->
        <li v-for="(item,index) in list" :key="index" v-if="index%2==0">{{index}}--{{item}}</li>

        <!--元素键值对-->
        <li v-for="(value,key) in user">{{key}}--{{value}}</li>
        <li v-for="(item,index) in userlist" :key="item.user.uname">
            <div v-if="item.user.uname=='hello'" style="background: #3a8ee6">
                {{index}}--{{item.user.uname}}--{{item.user.age}}
            </div>
            <div v-else>
                {{index}}--{{item.user.uname}}--{{item.user.age}}
            </div>
        </li>
    </ul>

</div>
</body>

<script src="/js/vue/vue.min.js"></script>
<script>
    var VM = new Vue({
        el: '#app',
        data: {
            list: [1, 2, 3, 4, 5],
            user: {uname: '学成', age: 10},
            userlist: [
                {user: {uname: 'hello', age: 10}},
                {user: {uname: 'vue', age: 11}}
            ]
        }
    });
</script>
</html>

<!--
    Vue标签:
        v-model：支持双向绑定数据
        v-text：渲染变量值到指定元素
        v-on：绑定一个按钮的单击事件
        v-bind：将数据对象绑定在dom的任意属性中
-->
